import {
  eventFormat,
  stateFormat,
  bindEvent
} from './index';

/**
 * 视图绑定
 * @param {*} param0 App()
 * @param {*} template App().template
 * @param {*} state 响应式对象
 * @param {*} methods App().methods
 * @param {*} DOM '<div id="app"></div>'
 */
export function useDOM({
  template,
  state,
  methods
}, DOM) {
  //将编译后的模板挂载到页面
  DOM.innerHTML = render(template, state);

  //绑定事件处理函数
  bindEvent(methods);
}

//渲染模板 组装模板
//1.解析onClick句柄
//2.解析{{}}状态
export function render(template, state) {
  //方法一：处理event
  //实现：
  //1.将视图模板里的 < button onClick = "add(2)" > +</ > 转为 < button data - dom="1640242740186" > +</ >, 用标识属性代替原有的绑定句柄来记录该事件处理函数的类型和名称
  //2.关联用户在methods定义的方法和视图事件处理函数的绑定
  template = eventFormat(template);

  //方法二：处理{{}}状态
  template = stateFormat(template, state);

  // console.log(template);

  //导出组装格式化后的模板
  return template;
}

/**
 * 根据state数据发生变更后更新视图
 * @param {*} statePool 状态池：包含flag标识和变量名数组
 * @param {*} key state数据的属性名
 * @param {*} value state数据的对应的属性值
 */
export function update(statePool, key, value) {
  // console.log(key);
  //count

  // console.log(value);
  //2

  let oItem = null;

  //获取所有节点
  const allElements = document.getElementsByTagName('*');
  // console.log(allElements);
  //HTMLCollection(13) [html, head, script, meta, meta, meta, title, body, div#app, h1, button, button, script, viewport: meta, app: div#app]

  //遍历状态池
  statePool.forEach((item) => {
    // console.log(item);
    //{flag: 1640278865225, state: ['count']}

    //当state的最后一项的变量名称和key的变量名称一样时
    if (item.state[item.state.length - 1] === key) {
      for (let i = 0; i < allElements.length; i++) {
        oItem = allElements[i];
        // console.log(oItem.dataset.dom);
        //1640279004652

        //拿到带有data-dom的节点的标签属性值
        let _flag = parseInt(oItem.dataset.dom);

        //找到符合flag条件的那一个节点
        if (_flag === item.flag) {
          //对state数据发生更改的那个节点的文本内容进行更新
          oItem.innerHTML = value;
        }
      }
    }


  });
}